<!DOCTYPE html>
<html lang="zh" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>html5炫酷购物车结算动画特效 | Demo: Boxes_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/checkout-boxes.css" />
		<!--[if IE]>
  		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
		<![endif]-->
	</head>
	<body class="color-1">
		<div class="container">
			<header class="codrops-header">
				<h1>html5炫酷购物车结算动画特效 <span>Simple enhancements for the checkout process</span></h1>
				<div class="htmleaf-links">
					<a class="htmleaf-icon icon-home" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
					<a class="htmleaf-icon icon-arrow-right3" href="http://www.htmleaf.com/html5/html5muban/201501231254.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
				</div>
				<nav class="codrops-demos">
					<a href="index.html">Corner Flat</a>
					<a href="rounded.html">Rounded</a>
					<a href="boxes.html" class="current-demo">Boxes</a>
					<a href="sidebar.html">Sidebar</a>
				</nav>
			</header>
			<section class="content">
				<div class="dummy-browser">
					<div class="dummy-browser--inner">
						<div class="dummy-header"></div>
						<div class="checkout">
							<div class="checkout-grid">
								<div class="checkout-grid__item"><img src="img/s1.png" alt="Shirt" /><h4>T-Shirt</h4><span class="price">$19.90</span><button class="checkout-grid__item-remove"><i class="icon fa fa-close"></i></button></div>
								<div class="checkout-grid__item"><img src="img/s2.png" alt="Shirt" /><h4>T-Shirt</h4><span class="price">$19.90</span><button class="checkout-grid__item-remove"><i class="icon fa fa-close"></i></button></div>
								<div class="checkout-grid__item"><img src="img/s3.png" alt="Shirt" /><h4>T-Shirt </h4><span class="price">$29.90</span><button class="checkout-grid__item-remove"><i class="icon fa fa-close"></i></button></div>
								<div class="checkout-grid__item checkout-grid__item--summary">
									<button class="checkout__close checkout__cancel"><i class="icon fa fa-close"></i></button>
									<div class="checkout__total">$219.30</div>
									<button class="checkout__option checkout__option--loud">Buy</button>
									<button class="checkout__option checkout__option--silent checkout__cancel">or continue shopping <i class="fa fa-angle-right"></i></button>
									<a class="checkout__button" href="#"><!-- Fallback location -->
										<span class="checkout__text">
											<svg class="checkout__icon" width="30px" height="30px" viewBox="0 0 35 35">
												<path d="M33.623,8.004c-0.185-0.268-0.486-0.434-0.812-0.447L12.573,6.685c-0.581-0.025-1.066,0.423-1.091,1.001 c-0.025,0.578,0.423,1.065,1.001,1.091L31.35,9.589l-3.709,11.575H11.131L8.149,4.924c-0.065-0.355-0.31-0.652-0.646-0.785 L2.618,2.22C2.079,2.01,1.472,2.274,1.26,2.812s0.053,1.146 0.591,1.357l4.343,1.706L9.23,22.4c0.092,0.497,0.524,0.857,1.03,0.857 h0.504l-1.15,3.193c-0.096,0.268-0.057,0.565,0.108,0.798c0.163,0.232,0.429,0.37,0.713,0.37h0.807 c-0.5,0.556-0.807,1.288-0.807,2.093c0,1.732,1.409,3.141,3.14,3.141c1.732,0,3.141-1.408,3.141-3.141c0-0.805-0.307-1.537-0.807-2.093h6.847c-0.5,0.556-0.806,1.288-0.806,2.093c0,1.732,1.407,3.141,3.14,3.141 c1.731,0,3.14-1.408,3.14-3.141c0-0.805-0.307-1.537-0.806-2.093h0.98c0.482,0,0.872-0.391,0.872-0.872s-0.39-0.873-0.872-0.873 H11.675l0.942-2.617h15.786c0.455,0,0.857-0.294,0.996-0.727l4.362-13.608C33.862,8.612,33.811,8.272,33.623,8.004z M13.574,31.108c-0.769,0-1.395-0.626-1.395-1.396s0.626-1.396,1.395-1.396c0.77,0,1.396,0.626,1.396,1.396S14.344,31.108,13.574,31.108z M25.089,31.108c-0.771,0-1.396 0.626-1.396-1.396s0.626-1.396,1.396-1.396c0.77,0,1.396,0.626,1.396,1.396 S25.858,31.108,25.089,31.108z"/>
											</svg>
										</span>
									</a>
								</div>
								<div class="checkout-grid__item"><img src="img/s4.png" alt="Shirt" /><h4>Longsleeve</h4><span class="price">$49.90</span><button class="checkout-grid__item-remove"><i class="icon fa fa-close"></i></button></div>
								<div class="checkout-grid__item"><img src="img/s5.png" alt="Shirt" /><h4>Sleeveless</h4><span class="price">$9.90</span><button class="checkout-grid__item-remove"><i class="icon fa fa-close"></i></button></div>
								<div class="checkout-grid__item"><img src="img/s6.png" alt="Shirt" /><h4>Shirt</h4><span class="price">$59.90</span><button class="checkout-grid__item-remove"><i class="icon fa fa-close"></i></button></div>
								<div class="checkout-grid__item"><img src="img/s7.png" alt="Shirt" /><h4>T-Shirt</h4><span class="price">$29.90</span><button class="checkout-grid__item-remove"><i class="icon fa fa-close"></i></button></div>
							</div>
						</div><!-- /checkout -->

						<div class="dummy-grid dummy-grid--filled">
							<div class="dummy-grid__item"></div>
							<div class="dummy-grid__item"></div>
							<div class="dummy-grid__item"></div>
							<div class="dummy-grid__item"></div>
							<div class="dummy-grid__item"></div>
							<div class="dummy-grid__item"></div>
							<div class="dummy-grid__item"></div>
							<div class="dummy-grid__item"></div>
						</div><!-- /dummy-grid -->
					</div>
				</div>
			</section> 
		</div><!-- /container -->
		<script src="js/classie.js"></script>
		<script>
			(function() {
				[].slice.call( document.querySelectorAll( '.checkout' ) ).forEach( function( el ) {
					var openCtrl = el.querySelector( '.checkout__button' ),
						closeCtrls = el.querySelectorAll( '.checkout__cancel' );

					openCtrl.addEventListener( 'click', function(ev) {
						ev.preventDefault();
						classie.add( el, 'checkout--active' );
					} );

					[].slice.call( closeCtrls ).forEach( function( ctrl ) {
						ctrl.addEventListener( 'click', function() {
							classie.remove( el, 'checkout--active' );
						} );
					} );
				} );
			})();
		</script>
	</body>
</html>
